<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        <input type="text" value="111" name="username1">
        <input type="text" value="222" name="username2">
        <input type="text" value="333" name="username3">
        <input type="text" value="444" name="username4">
        <input type="text" value="555" name="username5">
        <input type="text" value="666" name="username6">
        <input type="text" value="777" name="username7">
        <input type="text" value="888" name="username8">
        <input type="text" value="999" name="username9">
        <input type="text" value="000" name="username10">
        <button>提交</button>
    </form>
    <script src="../assets/lib/jquery-3.6.0.min.js"></script>
    <script>
        const form = document.querySelector('form')
        //快速获取表单内容的方法,表单里的元素都要有name属性
        form.addEventListener('submit', function (e) {
            e.preventDefault()
            //1.jquery 的方式，需要先插入jquery.js插件
            // const jqForm = $(form).serialize()//类似于 a=1&b=2
            // console.log(jqForm);
            //2.form-serialize  需要先插入form-serialize.js插件
            const str = serialize(form)//返回字符串
            const obj = serialize(form, { hash: true })//返回对象
            console.log(str);
            console.log(obj);

            //3.formData 内置的特殊构造函数，对应的实例也特殊，无法直接访问里面的数据，通过 .get()
            // const formData = new FormData(form)
            // console.log(formData.get('username1'));//
            // let list = []
            // let obj = {}
            // //遍历对象
            // formData.forEach((val, key) => {

            //     // list.push(`${key}=${val}`)//数组
            //     // obj[key] = val//对象
            // })
            // console.log(list);
            // console.log(list.join('&'));
            // console.log(obj);

            //4.快速给form表单赋值
            // const obj = {
            //     username1: "username1username1",
            //     username2: "username2username2",
            //     username3: "username3username3",
            //     username4: "username4username4",
            //     username5: "username5username5",
            //     username6: "username6username6",
            //     username7: "username7username7",
            //     username8: "username8username8",
            //     username9: "username9username9",
            //     username10: "username10username10",
            // }
            // for (const key in obj) {
            //     document.querySelector(`input[name=${key}]`).value = obj[key]
            // }
        })





    </script>
</body>

</html>